<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>研学分析统计：教体局/学校</title>
		<link rel="stylesheet" type="text/css" href="css/DE/DE_studies_plan_analyze_education.css" />
		<script src="js/DE/highmaps.js"></script>
		<script src="js/DE/highcharts.js"></script>
		<script src="js/DE/exporting.js"></script>
		<script src="js/DE/oldie.js"></script>
		<script src="js/DE/data.js"></script>
		<script src="js/DE/highcharts-zh_CN.js"></script>
		<!-- element引入开始 -->
			<script src="//unpkg.com/vue/dist/vue.js"></script>
			<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
			<!-- 引入样式 -->
			<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
			<!-- 引入组件库 -->
			<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- element引入结束 -->
		<script src="https://data.jianshukeji.com/geochina/henan.js"></script>
	</head>
	<body>
		<header></header>
		<section>
			<!-- 标题 -->
			<div id="title-div">
				<p>研学分析统计：教育局/学校</p>
			</div>
			<!-- 地图和条形图 -->
			<div id="mapandbardiagram">
				<div id="mapandbardiagram-left">
					<div id="map" style="width:450px;height: 400px;"></div>
				</div>
				<div id="mapandbardiagram-right">
					<div id="eachcitycompletionchart" style="width: 100%; height: 100%;"></div>
					<table id="datatable" hidden="hidden">
						<thead>
							<tr>
								<th></th>
								<th>计划数</th>
								<th>学生数</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th>郑州</th>
								<td>638</td>
								<td>22093</td>
							</tr>
							<tr>
								<th>开封</th>
								<td>300</td>
								<td>19202</td>
							</tr>
							<tr>
								<th>洛阳</th>
								<td>488</td>
								<td>18292</td>
							</tr>
							<tr>
								<th>平顶山</th>
								<td>239</td>
								<td>15820</td>
							</tr>
							<tr>
								<th>安阳</th>
								<td>1200</td>
								<td>20300</td>
							</tr>
							<tr>
								<th>鹤壁</th>
								<td>450</td>
								<td>16051</td>
							</tr>
							<tr>
								<th>新乡</th>
								<td>903</td>
								<td>12330</td>
							</tr>
							<tr>
								<th>焦作</th>
								<td>756</td>
								<td>12304</td>
							</tr>
							<tr>
								<th>濮阳</th>
								<td>620</td>
								<td>15230</td>
							</tr>
							<tr>
								<th>许昌</th>
								<td>684</td>
								<td>15230</td>
							</tr>
							<tr>
								<th>漯河</th>
								<td>760</td>
								<td>31010</td>
							</tr>
							<tr>
								<th>三门峡</th>
								<td>861</td>
								<td>12305</td>
							</tr>
							<tr>
								<th>南阳</th>
								<td>460</td>
								<td>20001</td>
							</tr>
							<tr>
								<th>商丘</th>
								<td>416</td>
								<td>32021</td>
							</tr>
							<tr>
								<th>信阳</th>
								<td>9530</td>
								<td>30202</td>
							</tr>
							<tr>
								<th>周口</th>
								<td>12457</td>
								<td>32401</td>
							</tr>
							<tr>
								<th>驻马店</th>
								<td>10457</td>
								<td>24401</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!-- 研学计划完成情况 -->
			<div id="plan-completion">
				<div id="plan-completion-filter">
					<span style="float: left;margin-top: 20px;">研学计划完成情况</span>
					<div id="plan-completion-area-left">
						<div class="block">
						    <el-cascader
							    v-model="value"
						        placeholder="全省"
							    :options="options"
						        :props="{ expandTrigger: 'hover' }"
							    @change="handleChange"></el-cascader>
						</div>
					</div>
					<div id="plan-completion-year">
						<div class="block">
						    <el-cascader
							    v-model="value"
						        placeholder="年度"
							    :options="options"
						        :props="{ expandTrigger: 'hover' }"
							    @change="handleChange"></el-cascader>
						</div>
					</div>
					<div id="plan-completion-month">
						<div class="block">
						    <el-cascader
							    v-model="value"
						        placeholder="月份"
							    :options="options"
						        :props="{ expandTrigger: 'hover' }"
							    @change="handleChange"></el-cascader>
						</div>
					</div>
					<div id="plan-completion-area-right">
						<div class="block">
						    <el-cascader
							    v-model="value"
						        placeholder="区域"
							    :options="options"
						        :props="{ expandTrigger: 'hover' }"
							    @change="handleChange"></el-cascader>
						</div>
					</div>
				</div>
				<div id="plan-completion-left">
					<p>本学期研学计划完成进度</p>
					<el-progress style="margin-top: 60px;width: 90%;margin-left: 30px;" :text-inside="true" :stroke-width="60" :percentage="19" color="#54BFC1" ></el-progress>
				</div>
				<div id="plan-completion-right">
					<div id="container" style="width:95%;height:100%;float: left;"></div>
				</div>
			</div>
			<!-- 研学计划参与情况 -->
			<div id="plan-participation">
				<div id="plan-participation-filter">
					<span style="float: left;margin-top: 20px;">研学计划参与情况</span>
					<div id="plan-participation-area-left">
						<div class="block">
						    <el-cascader
							    v-model="value"
						        placeholder="全省"
							    :options="options"
						        :props="{ expandTrigger: 'hover' }"
							    @change="handleChange"></el-cascader>
						</div>
					</div>
					<div id="plan-participation-year">
						<div class="block">
						    <el-cascader
							    v-model="value"
						        placeholder="年度"
							    :options="options"
						        :props="{ expandTrigger: 'hover' }"
							    @change="handleChange"></el-cascader>
						</div>
					</div>
					<div id="plan-participation-month">
						<div class="block">
						    <el-cascader
							    v-model="value"
						        placeholder="月份"
							    :options="options"
						        :props="{ expandTrigger: 'hover' }"
							    @change="handleChange"></el-cascader>
						</div>
					</div>
					<div id="plan-participation-area-right">
						<div class="block">
						    <el-cascader
							    v-model="value"
						        placeholder="区域"
							    :options="options"
						        :props="{ expandTrigger: 'hover' }"
							    @change="handleChange"></el-cascader>
						</div>
					</div>
				</div>
				<!-- 学校与学生面板切换 -->
				<div id="schoolandstudentcut">
					&nbsp;
					<input type="button" name="" style="cursor: pointer;" id="schoolpanelbtn" value="学校" />
					<input type="button" name="" style="cursor: pointer;" id="studentpanelbtn" value="学生" />
				</div>
				<!-- 学校面板 -->
				<div id="schoolpanel">
					<div id="participationdataandcovercondition">
						<div id="participationdata">
							<div id="participationdatachart" style="width:100%;height:90%;float: left;"></div>
							<p style="width: 100%;text-align: center;font-size: 18px;">参与研学计划数据</p>
						</div>
						<div id="covercondition">
							<div id="coverconditionchart" style="width: 100%;height: 90%;float: left;">
								<div id="covercondition-primaryschool">
									<el-progress :stroke-width="15" type="circle" :percentage="68" color="#64ACF9"></el-progress>
									<p>小学</p>
								</div>
								<div id="covercondition-middleschool">
									<el-progress :stroke-width="15" type="circle" :percentage="91" color="#43CF7C"></el-progress>
									<p>初中</p>
								</div>
								<div id="covercondition-highschool">
									<el-progress :stroke-width="15" type="circle" :percentage="42" color="#FF8D1A"></el-progress>
									<p>高中</p>
								</div>
							</div>
							<p style="text-align: center;font-size: 18px;">研学计划覆盖情况</p>
						</div>
					</div>
					<!-- 研学计划按区域完成情况 -->
					<div id="completionbyarea">
						<div id="completionbyarea-filter">
							<span style="float: left;margin-top: 20px;">研学计划按区域完成情况</span>
							<div id="completionbyarea-area-left">
								<div class="block">
								    <el-cascader
									    v-model="value"
								        placeholder="全省"
									    :options="options"
								        :props="{ expandTrigger: 'hover' }"
									    @change="handleChange"></el-cascader>
								</div>
							</div>
							<div id="completionbyarea-year">
								<div class="block">
								    <el-cascader
									    v-model="value"
								        placeholder="年度"
									    :options="options"
								        :props="{ expandTrigger: 'hover' }"
									    @change="handleChange"></el-cascader>
								</div>
							</div>
							<div id="completionbyarea-month">
								<div class="block">
								    <el-cascader
									    v-model="value"
								        placeholder="月份"
									    :options="options"
								        :props="{ expandTrigger: 'hover' }"
									    @change="handleChange"></el-cascader>
								</div>
							</div>
							<div id="completionbyarea-area-right">
								<div class="block">
								    <el-cascader
									    v-model="value"
								        placeholder="区域"
									    :options="options"
								        :props="{ expandTrigger: 'hover' }"
									    @change="handleChange"></el-cascader>
								</div>
							</div>
						</div>
						<div id="completionbyareachartdiv">
							<div id="completionbyareachart" style="width: 100%; height: 100%; margin: 0 auto"></div>
							<table id="datatable" hidden="hidden">
								<thead>
									<tr>
										<th></th>
										<th>计划数</th>
										<th>完成数</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<th>中原区</th>
										<td>638</td>
										<td>329</td>
									</tr>
									<tr>
										<th>二七区</th>
										<td>300</td>
										<td>109</td>
									</tr>
									<tr>
										<th>管城区</th>
										<td>488</td>
										<td>209</td>
									</tr>
									<tr>
										<th>金水区</th>
										<td>382</td>
										<td>98</td>
									</tr>
									<tr>
										<th>上街区</th>
										<td>214</td>
										<td>87</td>
									</tr>
									<tr>
										<th>惠济区</th>
										<td>600</td>
										<td>260</td>
									</tr>
									<tr>
										<th>巩义市</th>
										<td>289</td>
										<td>105</td>
									</tr>
									<tr>
										<th>荥阳市</th>
										<td>392</td>
										<td>124</td>
									</tr>
									<tr>
										<th>新密市</th>
										<td>257</td>
										<td>109</td>
									</tr>
									<tr>
										<th>新郑市</th>
										<td>189</td>
										<td>87</td>
									</tr>
									<tr>
										<th>登封市</th>
										<td>451</td>
										<td>354</td>
									</tr>
									<tr>
										<th>中牟县</th>
										<td>700</td>
										<td>123</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<!-- 按参与学生数排名前十的学校 -->
					<div id="schooltopbystuparticipation">
						<div id="schooltopbystuparticipation-filter">
							<span style="float: left;margin-top: 20px;">按参与学生数排名前十的学校</span>
							<div id="schooltopbystuparticipation-area-left">
								<div class="block">
								    <el-cascader
									    v-model="value"
								        placeholder="全省"
									    :options="options"
								        :props="{ expandTrigger: 'hover' }"
									    @change="handleChange"></el-cascader>
								</div>
							</div>
							<div id="schooltopbystuparticipation-year">
								<div class="block">
								    <el-cascader
									    v-model="value"
								        placeholder="年度"
									    :options="options"
								        :props="{ expandTrigger: 'hover' }"
									    @change="handleChange"></el-cascader>
								</div>
							</div>
							<div id="schooltopbystuparticipation-month">
								<div class="block">
								    <el-cascader
									    v-model="value"
								        placeholder="月份"
									    :options="options"
								        :props="{ expandTrigger: 'hover' }"
									    @change="handleChange"></el-cascader>
								</div>
							</div>
							<div id="schooltopbystuparticipation-area-right">
								<div class="block">
								    <el-cascader
									    v-model="value"
								        placeholder="区域"
									    :options="options"
								        :props="{ expandTrigger: 'hover' }"
									    @change="handleChange"></el-cascader>
								</div>
							</div>
						</div>
						<!-- 小学、初中、高中面板切换 -->
						<div id="primaryschoolandmiddleschoolandhighschoolcut">
							&nbsp;
							<input type="button" name="" style="cursor: pointer;" id="primaryschool" value="小学" />
							<input type="button" name="" style="cursor: pointer;" id="middleschool" value="初中" />
							<input type="button" name="" style="cursor: pointer;" id="highschool" value="高中" />
						</div>
						<!-- 小学图表面板 -->
						<div id="primaryschoolpanel">
							<div id="primaryschoolpanelchart" style="width: 100%;height: 40%;"></div>
							<div id="searchprimaryschoolresult">
								<div id="searchprimaryschool">
									<input id="searchprimaryschooltext" type="text" placeholder="请输入" />
									<img src="img/DE/search-icon.png" width="20px" height="20px" >
								</div>
								<template>
								<div style="padding-left: 50px;">
								  <el-table
								    :data="tableData"
								    style="width: 100%;margin-bottom: 20px;"
								    row-key="id"
								    border
								    default-expand-all
								    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
								    <el-table-column
								      prop="city"
								      label="城市"
								      width="170">
								    </el-table-column>
								    <el-table-column
								      prop="area"
								      label="区域"
								      sortable
								      width="100">
								    </el-table-column>
								    <el-table-column
								      prop="population"
								      label="人数"
								      sortable
								      width="100">
								    </el-table-column>
								    <el-table-column
								      prop="studiespopulation"
								      label="研学人数"
								      sortable
								      width="110">
								    </el-table-column><el-table-column
								      prop="studiesproportion"
								      label="研学比例"
								      sortable
								      width="110">
								    </el-table-column>
								    <el-table-column
								      prop="destination"
								      label="目的地"
								      sortable
								      width="100">
								    </el-table-column><el-table-column
								      prop="predicttrip"
								      label="预计出行"
								      sortable
								      width="110">
								    </el-table-column>
								    <el-table-column
								      prop="accident"
								      label="安全事故"
								      sortable
								      width="110">
								    </el-table-column><el-table-column
								      prop="remark"
								      label="备注"
								      width="80">
									  <template slot-scope="scope">
										<el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
									  </template>
								    </el-table-column>
								  </el-table>
								</div>
								</template>
							</div>
						</div>
						<!-- 初中图表面板 -->
						<div id="middleschoolpanel">
							<div id="middleschoolpanelchart" style="width: 100%;height: 40%;"></div>
							<!-- 搜索初中 -->
							<div id="searchmiddleschoolresult">
								<div id="searchmiddleschool">
									<input id="searchmiddleschooltext" type="text" placeholder="请输入" />
									<img src="img/DE/search-icon.png" width="20px" height="20px" >
								</div>
								<template>
								<div style="padding-left: 50px;">
								  <el-table
								    :data="tableData"
								    style="width: 100%;margin-bottom: 20px;"
								    row-key="id"
								    border
								    default-expand-all
								    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
								    <el-table-column
								      prop="city"
								      label="城市"
								      width="170">
								    </el-table-column>
								    <el-table-column
								      prop="area"
								      label="区域"
								      sortable
								      width="100">
								    </el-table-column>
								    <el-table-column
								      prop="population"
								      label="人数"
								      sortable
								      width="100">
								    </el-table-column>
								    <el-table-column
								      prop="studiespopulation"
								      label="研学人数"
								      sortable
								      width="110">
								    </el-table-column><el-table-column
								      prop="studiesproportion"
								      label="研学比例"
								      sortable
								      width="110">
								    </el-table-column>
								    <el-table-column
								      prop="destination"
								      label="目的地"
								      sortable
								      width="100">
								    </el-table-column><el-table-column
								      prop="predicttrip"
								      label="预计出行"
								      sortable
								      width="110">
								    </el-table-column>
								    <el-table-column
								      prop="accident"
								      label="安全事故"
								      sortable
								      width="110">
								    </el-table-column><el-table-column
								      prop="remark"
								      label="备注"
								      width="80">
									  <template slot-scope="scope">
										<el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
									  </template>
								    </el-table-column>
								  </el-table>
								</div>
								</template>
							</div>
						</div>
						<!-- 高中图表面板 -->
						<div id="highschoolpanel">
							<div id="highschoolpanelchart" style="width: 100%;height: 40%;"></div>
							<!-- 搜索高中 -->
							<div id="searchhighschoolresult">
								<div id="searchhighschool">
									<input id="searchhighschooltext" type="text" placeholder="请输入" />
									<img src="img/DE/search-icon.png" width="20px" height="20px" >
								</div>
								<template>
								<div style="padding-left: 50px;">
								  <el-table
								    :data="tableData"
								    style="width: 100%;margin-bottom: 20px;"
								    row-key="id"
								    border
								    default-expand-all
								    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
								    <el-table-column
								      prop="city"
								      label="城市"
								      width="170">
								    </el-table-column>
								    <el-table-column
								      prop="area"
								      label="区域"
								      sortable
								      width="100">
								    </el-table-column>
								    <el-table-column
								      prop="population"
								      label="人数"
								      sortable
								      width="100">
								    </el-table-column>
								    <el-table-column
								      prop="studiespopulation"
								      label="研学人数"
								      sortable
								      width="110">
								    </el-table-column><el-table-column
								      prop="studiesproportion"
								      label="研学比例"
								      sortable
								      width="110">
								    </el-table-column>
								    <el-table-column
								      prop="destination"
								      label="目的地"
								      sortable
								      width="100">
								    </el-table-column><el-table-column
								      prop="predicttrip"
								      label="预计出行"
								      sortable
								      width="110">
								    </el-table-column>
								    <el-table-column
								      prop="accident"
								      label="安全事故"
								      sortable
								      width="110">
								    </el-table-column><el-table-column
								      prop="remark"
								      label="备注"
								      width="80">
									  <template slot-scope="scope">
										<el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
									  </template>
								    </el-table-column>
								  </el-table>
								</div>
								</template>
							</div>
						</div>
					</div>
				</div>
				<!-- 学生面板 -->
				<div id="studentpanel">
					
				</div>
			</div>
		</section>
		<footer></footer>
		
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/DE/DE_studies_plan_analyze_education.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			// 研学计划按区域完成情况的柱状图
			var chart = Highcharts.chart('completionbyareachart', {
			    data: {
			        table: 'datatable'
			    },
			    chart: {
			        type: 'column'
			    },
				title: {
					text: ''
				},
			    yAxis: {
			        allowDecimals: false,
			        title: {
			            text: '',
			            rotation: 0
			        }
			    },
			    tooltip: {
			        formatter: function () {
			            return '<b>' + this.series.name + '</b><br/>' + this.point.y;
			        }
			    }
			});
			// 全省各地市研学计划完成情况
			var chart = Highcharts.chart('eachcitycompletionchart', {
			    data: {
			        table: 'datatable'
			    },
			    chart: {
			        type: 'column'
			    },
				title: {
					text: '全省各地市研学计划完成情况'
				},
			    yAxis: {
			        allowDecimals: false,
			        title: {
			            text: '',
			            rotation: 0
			        }
			    },
			    tooltip: {
			        formatter: function () {
			            return '<b>' + this.series.name + '</b><br/>' + this.point.y;
			        }
			    }
			});
			//进度条
			new Vue().$mount('#plan-completion-left');
			// 
			new Vue().$mount('#coverconditionchart')
			// 本学年研学计划完成数的折线图
			var chart = Highcharts.chart('container', {
				chart: {
				},
				title: {
					text: '本学年研学计划完成数'
				},
				xAxis: {
					type: 'category',
					labels: {
					}
				},
				legend: {
					enabled: false
				},
				tooltip: {
					pointFormat: '数据: <b>{point.y}</b>'
				},
				series: [{
					name: '总人口',
					data: [
						['9月', 129],
						['10月', 230],
						['11月', 298],
						['12月', 108],
						['1月', 0],
						['2月', 0],
						['3月', 0],
						['4月', 0],
						['5月', 0],
						['6月', 0],
						['7月', 0],
						['8月', 0]
						
					]
				}]
			});
			// 级联菜单
			var year = {
				data() {
				  return {
					value: [],
					options: [{
					    value: '0',
					    label: '2019年',
					    children: [{
						    value: '0',
						    label: 'HangZhou',
						    children: [{
						        value: '0',
						        label: 'West Lake'
						    }]
						}]
					}, {
						value: '1',
						label: '2018年',
						children: [{
							value: '1',
							label: 'NanJing',
							children: [{
							    value: '1',
							    label: 'Zhong Hua Men'
							}]
						}]
					}]
				  };
				},
				methods: {
				  handleChange(value) {
					console.log(value);
				  }
				}
			};
			var Ctor = Vue.extend(year);
			new Ctor().$mount('#plan-completion-year');
			new Ctor().$mount('#plan-participation-year');
			new Ctor().$mount('#completionbyarea-year');
			new Ctor().$mount('#schooltopbystuparticipation-year');
			
			
			
			var month = {
				data() {
				  return {
					value: [],
					options: [{
					    value: '0',
					    label: '1月',
					    children: [{
						    value: '1',
						    label: 'HangZhou',
						    children: [{
						        value: '0',
						        label: 'West Lake'
						    }]
						}]
					}, {
						value: '1',
						label: '2月',
						children: [{
							value: '1',
							label: 'NanJing',
							children: [{
							    value: '1',
							    label: 'Zhong Hua Men'
							}]
						}]
					}, {
						value: '2',
						label: '3月'
					}, {
						value: '3',
						label: '4月'
					}, {
						value: '4',
						label: '5月'
					}, {
						value: '5',
						label: '6月'
					}, {
						value: '6',
						label: '7月'
					}, {
						value: '7',
						label: '8月'
					}, {
						value: '8',
						label: '9月'
					}, {
						value: '9',
						label: '10月'
					}, {
						value: '10',
						label: '11月'
					}, {
						value: '11',
						label: '12月'
					}]
				  };
				},
				methods: {
				  handleChange(value) {
					console.log(value);
				  }
				}
			};
			var Ctor2 = Vue.extend(month);
			new Ctor2().$mount('#plan-completion-month');
			new Ctor2().$mount('#plan-participation-month');
			new Ctor2().$mount('#completionbyarea-month');
			new Ctor2().$mount('#schooltopbystuparticipation-month');
			
			var arealeft = {
				data() {
				  return {
					value: [],
					options: [{
					    value: '0',
					    label: '郑州市'
					}, {
						value: '1',
						label: '开封市'
					}, {
						value: '2',
						label: '洛阳'
					}, {
						value: '3',
						label: '平顶山'
					}, {
						value: '4',
						label: '安阳'
					}, {
						value: '5',
						label: '鹤壁'
					}, {
						value: '6',
						label: '新乡'
					}, {
						value: '7',
						label: '焦作'
					}, {
						value: '8',
						label: '濮阳'
					}, {
						value: '9',
						label: '许昌'
					}, {
						value: '10',
						label: '漯河'
					}, {
						value: '11',
						label: '三门峡'
					}, {
						value: '11',
						label: '南阳'
					}, {
						value: '11',
						label: '商丘'
					}]
				  };
				},
				methods: {
				  handleChange(value) {
					console.log(value);
				  }
				}
			};
			var Ctor3 = Vue.extend(arealeft);
			new Ctor3().$mount('#plan-completion-area-left');
			new Ctor3().$mount('#plan-participation-area-left');
			new Ctor3().$mount('#completionbyarea-area-left');
			new Ctor3().$mount('#schooltopbystuparticipation-area-left');
			
			var arearight = {
				data() {
				  return {
					value: [],
					options: [{
					    value: '0',
					    label: '郑州市',
						children: [{
							value: '0',
							label: 'NanJing',
							children: [{
							    value: '0',
							    label: 'Zhong Hua Men'
							}]
						}]
					}, {
						value: '1',
						label: '开封市'
					}, {
						value: '2',
						label: '洛阳'
					}, {
						value: '3',
						label: '平顶山'
					}, {
						value: '4',
						label: '安阳'
					}, {
						value: '5',
						label: '鹤壁'
					}, {
						value: '6',
						label: '新乡'
					}, {
						value: '7',
						label: '焦作'
					}, {
						value: '8',
						label: '濮阳'
					}, {
						value: '9',
						label: '许昌'
					}, {
						value: '10',
						label: '漯河'
					}, {
						value: '11',
						label: '三门峡'
					}, {
						value: '11',
						label: '南阳'
					}, {
						value: '11',
						label: '商丘'
					}]
				  };
				},
				methods: {
				  handleChange(value) {
					console.log(value);
				  }
				}
			};
			var Ctor3 = Vue.extend(arearight);
			new Ctor3().$mount('#plan-completion-area-right');
			new Ctor3().$mount('#plan-participation-area-right');
			new Ctor3().$mount('#completionbyarea-area-right');
			new Ctor3().$mount('#schooltopbystuparticipation-area-right');
			
			//学校与学生面板切换的动画
			$("#schoolpanelbtn").click(function() {
				$(this).css({"background-color":"#1890FF","color":"white"});
				$("#studentpanelbtn").css({"background-color":"white","color":"black"});
				$("#studentpanel").css({"display":"none"});
				$("#schoolpanel").css({"display":"block"});
			});
			$("#studentpanelbtn").click(function() {
				$(this).css({"background-color":"#1890FF","color":"white"});
				$("#schoolpanelbtn").css({"background-color":"white","color":"black"});
				$("#schoolpanel").css({"display":"none"});
				$("#studentpanel").css({"display":"block"});
			});
			//小学、初中、高中面板切换的动画
			$("#primaryschool").click(function() {
				$(this).css({"background-color":"#1890FF","color":"white"});
				$("#middleschool").css({"background-color":"white","color":"black"});
				$("#highschool").css({"background-color":"white","color":"black"});
				$("#middleschoolpanel").css({"display":"none"});
				$("#highschoolpanel").css({"display":"none"});
				$("#primaryschoolpanel").css({"display":"block"});
			});
			$("#middleschool").click(function() {
				$(this).css({"background-color":"#1890FF","color":"white"});
				$("#primaryschool").css({"background-color":"white","color":"black"});
				$("#highschool").css({"background-color":"white","color":"black"});
				$("#primaryschoolpanel").css({"display":"none"});
				$("#highschoolpanel").css({"display":"none"});
				$("#middleschoolpanel").css({"display":"block"});
			});
			$("#highschool").click(function() {
				$(this).css({"background-color":"#1890FF","color":"white"});
				$("#primaryschool").css({"background-color":"white","color":"black"});
				$("#middleschool").css({"background-color":"white","color":"black"});
				$("#primaryschoolpanel").css({"display":"none"});
				$("#middleschoolpanel").css({"display":"none"});
				$("#highschoolpanel").css({"display":"block"});
			});
			// 饼状图开始
			var chart = Highcharts.chart('participationdatachart', {
			    chart: {
			        spacing : [40, 0 , 40, 0]
			    },
			    title: {
			        floating:true,
			        text: '参与学校数'
			    },
			    tooltip: {
			        pointFormat: '{title.text}占比: {point.percentage:.1f}%'
			    },
			    plotOptions: {
			        pie: {
			            allowPointSelect: true,
			            cursor: 'pointer',
			            dataLabels: {
			                enabled: true,
			                format: '<b>{point.name}</b>:{point.percentage:.1f} %',
			                style: {
			                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
			                }
			            },
			            // point: {
			            //     events: {
			            //         mouseOver: function(e) {  // 鼠标滑过时动态更新标题
			            //             // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
			            //             chart.setTitle({
			            //                 text: e.target.name+ '\t'+ e.target.y + ' %'
			            //             });
			            //         }
			            //         , 
			            //         click: function(e) { // 同样的可以在点击事件里处理
			            //             chart.setTitle({
			            //                 text: e.point.name+ '\t'+ e.point.y + ' %'
			            //             });
			            //         }
			            //     }
			            // },
			        }
			    },
			    series: [{
			        type: 'pie',
			        innerSize: '80%',
			        data: [
						['小学', 46.60],
			            ['初中', 34.95],
			            ['高中', 18.45]
			        ]
			    }]
			}, function(c) { // 图表初始化完毕后的会掉函数
			    // 环形图圆心
			    var centerY = c.series[0].center[1],
			        titleHeight = parseInt(c.title.styles.fontSize);
			    // 动态设置标题位置
			    c.setTitle({
			        y:centerY + titleHeight/2
			    });
			});
			// 饼状图结束
			
			//小学面板的图表
			var chart = Highcharts.chart('primaryschoolpanelchart', {
				chart: {
					type: 'bar'
				},
				title: {
					text: ''
				},
				xAxis: {
					categories: ['小学', '小学', '小学', '小学', '小学', '小学', '小学', '小学', '小学'],
					title: {
						text: null
					}
				},
				yAxis: {
					min: 0,
					labels: {
						overflow: 'justify'
					}
				},
				plotOptions: {
					bar: {
						dataLabels: {
							enabled: true,
							allowOverlap: true // 允许数据标签重叠
						}
					}
				},
				legend: {
					layout: 'vertical',
					align: 'right',
					verticalAlign: 'top',
					x: -40,
					y: 100,
					floating: true,
					borderWidth: 1,
					backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
					shadow: true
				},
				series: [{
					name: '参与学生数',
					data: [838, 587, 545, 501, 468, 440, 405, 385, 360]
				}]
			});
			//初中面板的图表
			var chart = Highcharts.chart('middleschoolpanelchart', {
				chart: {
					type: 'bar'
				},
				title: {
					text: ''
				},
				xAxis: {
					categories: ['郑州八中', '河南省实验中学', '郑州七十三中', '郑州中学', '郑州五十七中', '郑州回民中学', '郑州七中', '经纬中学', '郑州兴华中学'],
					title: {
						text: null
					}
				},
				yAxis: {
					min: 0,
					labels: {
						overflow: 'justify'
					}
				},
				plotOptions: {
					bar: {
						dataLabels: {
							enabled: true,
							allowOverlap: true // 允许数据标签重叠
						}
					}
				},
				legend: {
					layout: 'vertical',
					align: 'right',
					verticalAlign: 'top',
					x: -40,
					y: 100,
					floating: true,
					borderWidth: 1,
					backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
					shadow: true
				},
				series: [{
					name: '参与学生数',
					data: [838, 587, 545, 501, 468, 440, 405, 385, 360]
				}]
			});
			//高中面板的图表
			var chart = Highcharts.chart('highschoolpanelchart', {
				chart: {
					type: 'bar'
				},
				title: {
					text: ''
				},
				xAxis: {
					categories: ['高中', '高中', '高中', '高中', '高中', '高中', '高中', '高中', '高中'],
					title: {
						text: null
					}
				},
				yAxis: {
					min: 0,
					labels: {
						overflow: 'justify'
					}
				},
				plotOptions: {
					bar: {
						dataLabels: {
							enabled: true,
							allowOverlap: true // 允许数据标签重叠
						}
					}
				},
				legend: {
					layout: 'vertical',
					align: 'right',
					verticalAlign: 'top',
					x: -40,
					y: 100,
					floating: true,
					borderWidth: 1,
					backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
					shadow: true
				},
				series: [{
					name: '参与学生数',
					data: [838, 587, 545, 501, 468, 440, 405, 385, 360]
				}]
			});
			//小学搜索
			var searchprimaryschoolresult = {
			    data() {
			      return {
			        tableData: [{
			          id: 1,
			          city: '郑州市',
					  area: '高中',
			          population: "6000",
					  studiespopulation: "3000",
					  studiesproportion: "50%",
					  destination: "5",
					  vacancy: "2",
					  accident: "0",
					  remark: "备注"
			        },{
			          id: 2,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 3,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 4,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 5,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 6,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 7,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 8,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 9,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 10,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 11,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 12,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 13,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 14,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 15,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        }]
			      }
			    },
			  }
			var Ctor = Vue.extend(searchprimaryschoolresult)
			new Ctor().$mount('#searchprimaryschoolresult')
			
			//初中搜索
			var searchmiddleschoolresult = {
			    data() {
			      return {
			        tableData: [{
			          id: 1,
			          schoolname: '郑州市实验中学',
					  hierarchy: '高中',
			          population: "6000",
					  studiespopulation: "3000",
					  studiesproportion: "50%",
					  destination: "5",
					  vacancy: "2",
					  accident: "0",
					  remark: "查看详情"
			        },{
			          id: 2,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 3,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 4,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 5,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 6,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 7,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 8,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 9,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 10,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 11,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 12,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 13,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 14,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 15,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        }]
			      }
			    },
			  }
			var Ctor = Vue.extend(searchmiddleschoolresult)
			new Ctor().$mount('#searchmiddleschoolresult')
			
			//高中搜索
			var searchhighschoolresult = {
			    data() {
			      return {
			        tableData: [{
			          id: 1,
			          schoolname: '郑州市实验中学',
					  hierarchy: '高中',
			          population: "6000",
					  studiespopulation: "3000",
					  studiesproportion: "50%",
					  destination: "5",
					  vacancy: "2",
					  accident: "0",
					  remark: "备注"
			        },{
			          id: 2,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 3,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 4,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 5,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 6,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 7,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 8,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 9,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 10,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 11,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 12,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 13,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 14,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        },{
			          id: 15,
			          schoolname: '',
					  hierarchy: '',
			          population: "",
					  studiespopulation: "",
					  studiesproportion: "",
					  destination: "",
					  vacancy: "",
					  accident: "",
					  remark: ""
			        }]
			      }
			    },
			  }
			var Ctor = Vue.extend(searchhighschoolresult)
			new Ctor().$mount('#searchhighschoolresult')
			
			
			
			// 随机数据
			var henandata = [
				{"name":"郑州","value":96},
				{"name":"开封","value":62},
				{"name":"洛阳","value":76},
				{"name":"平顶山","value":31},
				{"name":"安阳","value":48},
				{"name":"鹤壁","value":85},
				{"name":"新乡","value":16},
				{"name":"焦作","value":22},
				{"name":"濮阳","value":85},
				{"name":"许昌","value":70},
				{"name":"漯河","value":5},
				{"name":"三门峡","value":64},
				{"name":"南阳","value":26},
				{"name":"商丘","value":20},
				{"name":"信阳","value":37},
				{"name":"周口","value":59},
				{"name":"驻马店","value":77},
				{"name":"济源","value":34}];
			// 初始化图表
			var map = new Highcharts.Map('map', {
			  title: {
			    text: '河南省'
			  },
			  colorAxis: {
			    min: 0,
			    minColor: 'rgb(255,255,255)',
			    maxColor: '#006cee'
			  },
			  series: [{
			    data: henandata,
			    name: '数据',
			    mapData: Highcharts.maps['cn/henan'],
			    joinBy: 'name' // 根据 name 属性进行关联
			  }]
			});
		</script>
	</body>
</html>
